<template>
  <div class="container">
    <div class="header">
      <app-header :title="title"></app-header>
    </div>
    <div class="box">
      <div class="content">
        <div class="content-form">
          <el-form ref="form" :model="form" label-width="100px" class="my-el-form" label-position="left">
            <div class="form-title">Do you want to process as below?</div>
            <el-form-item label="Login: ">
              <el-input :disabled="true" v-model="form.login"></el-input>
            </el-form-item>
            <el-form-item label="Site Code: ">
              <el-input :disabled="true" v-model="form.siteCode"></el-input>
            </el-form-item>
            <el-form-item label="TT Number: ">
              <el-input :disabled="true" v-model="form.ttNumber"></el-input>
            </el-form-item>
            <el-form-item label="Date: ">
              <el-input :disabled="true" v-model="form.date"></el-input>
            </el-form-item>
            <el-form-item label="Time: ">
              <el-col :span="11">
                <el-input :disabled="true" v-model="form.date1"></el-input>
              </el-col>
              <el-col class="my-line" :span="2">---</el-col>
              <el-col :span="11">
                <el-input :disabled="true" v-model="form.date2"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="Case: ">
              <el-input :disabled="true" v-model="form.case"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="box-button">
        <div class="back-btn" @click="$router.push('/itseAppointment')"><div class="back-btn-text">Back</div></div>
        <div class="send-btn" @click="failureVisible = true"><div class="send-btn-text">Send Appointment</div></div>
      </div>
    </div>
    <el-dialog
      title=""
      :modal="data"
      :close-on-click-modal="data"
      :close-on-press-escape="data"
      :show-close="data"
      :modal-append-to-body="data"
      :visible.sync="successVisible"
      width="1000px">
      <app-header title="Amazon ITSE Appointment"></app-header>
      <div class="dialog-text">Appointment Successful!</div>
      <span slot="footer" class="dialog-footer">
        <el-button class="dialog-btn" @click="successCallback">Back</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title=""
      :modal="data"
      :close-on-click-modal="data"
      :close-on-press-escape="data"
      :show-close="data"
      :modal-append-to-body="data"
      :visible.sync="failureVisible"
      width="1000px">
      <app-header title="Amazon ITSE Appointment"></app-header>
      <div class="dialog-text">Appointment failed, please make another appointment.</div>
      <span slot="footer" class="dialog-footer">
        <el-button class="dialog-btn" @click="failureCallback">Back</el-button>
        <el-button class="dialog-btn" @click="successCallback">Exit</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AppHeader from '../../components/AppHeader'
export default {
  name: 'ItseAppointment',
  components: { AppHeader },
  data () {
    return {
      title: 'Amazon ITSE Appointment',
      form: {
        login: '',
        siteCode: '',
        ttNumber: '',
        date: '',
        date1: '',
        date2: '',
        case: ''
      },
      calendarVal: '',
      data: false,
      successVisible: false,
      failureVisible: false
    }
  },
  methods: {
    successCallback () {
      this.successVisible = false
      this.failureVisible = false
      this.$router.push('/bookAppointment')
    },
    failureCallback () {
      this.failureVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 1;

  .header {
    flex: none;
    height: 100px;
  }

  .box {
    flex: 1;
    display: flex;
    flex-direction: column;

    .content {
      height: 450px;
      display: flex;
      align-items: center;
      justify-content: center;

      &-form {
        border: 1px solid black;
        height: 100%;
        width: 30%;
        padding-left: 10px;
        padding-right: 100px;

        .form-title {
          height: 50px;
          width: 100%;
          display: flex;
          align-items: initial;
          justify-content: left;
          margin-top: 10px;
        }
      }
    }

    .box-button {
      height: 200px;
      display: flex;
      align-content: center;
      justify-content: center;

      .back-btn {
        width: 180px;
        height: 40px;
        background-color: gainsboro;
        border: 1px solid black;
        border-radius: 5px;
        margin-left: 100px;
        margin-right: 100px;
        margin-top: 100px;
        cursor: pointer;

        &-text {
          height: 20px;
          margin-top: 10px;
        }
      }

      .send-btn {
        width: 180px;
        height: 40px;
        background-color: gainsboro;
        border: 1px solid black;
        border-radius: 5px;
        margin-left: 100px;
        margin-right: 100px;
        margin-top: 100px;
        cursor: pointer;

        &-text {
          height: 20px;
          margin-top: 10px;
        }
      }
    }
  }

  .dialog-text {
    height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: black;
  }

  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    .dialog-btn {
      margin-left: 70px;
      margin-right: 70px;
      width: 200px;
    }
  }
}

</style>

<style lang="scss">
.my-line {
  margin: 0 auto;
}

.el-dialog__header {
  width: 0;
  height: 0;
  padding: 0;
}

.el-dialog__body {
  padding: 0;
}

</style>
